<template>
  <div id="state-transition">
    <el-card class="process-card">
      <el-row :gutter="22">
        <el-col :span="1" />
        <el-col :span="5"
          ><el-input
            clearable
            v-model="PCB.process_name"
            placeholder="输入进程标识符"
            suffix-icon="el-icon-document"
          ></el-input
        ></el-col>
        <el-col :span="5"
          ><el-input
            type="number"
            clearable
            v-model="PCB.process_time"
            placeholder="输入时间片数"
            icon="el-icon-time"
            suffix-icon="el-icon-date"
          ></el-input
        ></el-col>
        <el-col :span="5"
          ><el-input
            type="number"
            clearable
            v-model="PCB.process_priority"
            placeholder="输入优先级"
          ></el-input
        ></el-col>
        <el-col :span="5">
          <div class="flex">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="createProcess()"
              >添加</el-button
            ><el-button
              type="primary"
              icon="el-icon-plus"
              @click="randomCreateProcess()"
              >随机添加</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-card>
    <process-table
      :process_queue="ready_queue"
      header="就绪队列"
      badge_type="primary"
    ></process-table>

    <process-table
      :process_queue="blocking_queue"
      header="阻塞队列"
      badge_type="warning"
    ></process-table>

    <process-table
      :process_queue="over_queue"
      header="终止队列"
      badge_type="danger"
    ></process-table>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import ProcessTable from '@/components/process/ProcessTable'
import customColors from '@/assets/custom-colors'
export default {
  components: { ProcessTable },
  data() {
    return {
      BLOCK_FLAG: 8,
      ROUSE_FLAG: 15,
      customColors: customColors,
      PCB: {
        process_name: null,
        process_time: null,
        process_priority: null,
        process_status: '就绪',
        process_all_time: null,
        process_progress: 100,
      },
      ready_queue: [],
      blocking_queue: [],
      over_queue: [],
    }
  },
  mounted() {
    this.run()
  },
  computed: {},
  methods: {
    randomCreateProcess() {
      let cnt = 0
      let timer = setInterval(() => {
        let pcb = {}
        let maxRand = 30
        pcb.process_time = this.getRandomInt(maxRand)
        pcb.process_all_time = pcb.process_time
        pcb.process_name = Date.parse(new Date())
        pcb.process_priority = this.getRandomInt(maxRand)
        pcb.process_status = '就绪'
        pcb.process_progress = 100
        this.PCB = pcb
        this.createProcess()
        if (cnt++ == 5) clearInterval(timer)
      }, 500)
    },
    createProcess() {
      let pcb = JSON.parse(JSON.stringify(this.PCB))
      console.log(pcb)
      if (pcb.process_name && pcb.process_time && pcb.process_priority) {
        // console.log('填写成功')
        pcb.process_all_time = pcb.process_time
        this.addToReady(pcb)
        this.PCB.process_name = ''
        this.PCB.process_priority = null
        this.PCB.process_time = null
      } else {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '未填写完整',
        })
        console.log('未填写完整')
      }
    },
    addToReady(process) {
      this.ready_queue.push(process)
      this.sortProcess()
    },
    sortProcess() {
      this.ready_queue.sort((x, y) => y.process_priority - x.process_priority)
      if (this.ready_queue.length > 1)
        this.ready_queue[1].process_status = '就绪'
      if (this.ready_queue.length > 0)
        this.ready_queue[0].process_status = '执行'
    },
    run() {
      setInterval(() => {
        if (this.ready_queue.length > 0) {
          let rand = this.getRandomInt(20)
          if (rand === this.BLOCK_FLAG) {
            this.blockProcess()
          } else if (
            (rand = this.ROUSE_FLAG && this.blocking_queue.length > 0)
          ) {
            this.rouseProcess()
          } else {
            this.dispatchProcess()
          }
        }
      }, 1000)
    },

    dispatchProcess() {
      let run_process = this.ready_queue[0]
      run_process.process_time--
      run_process.process_priority--
      run_process.process_progress = parseFloat(
        Number(
          (run_process.process_time / run_process.process_all_time) * 100
        ).toFixed(2)
      )
      if (run_process.process_time === 0) this.overProcess(run_process)
      this.sortProcess()
    },

    blockProcess() {
      let process = this.ready_queue[0]
      this.ready_queue.shift()
      process.process_status = '阻塞'
      this.blocking_queue.push(process)
      this.sortProcess()
    },

    rouseProcess() {
      let process = this.blocking_queue[0]
      this.blocking_queue.shift()
      process.process_status = '就绪'
      this.ready_queue.push(process)
      this.sortProcess()
    },

    overProcess() {
      let process = this.ready_queue[0]
      process.process_status = '终止'
      this.over_queue.push(process)
      this.ready_queue.shift()
    },

    getRandomInt(max) {
      return Math.floor(Math.random() * max)
    },
  },
}
</script>

<style scoped>
#state-transition {
  width: 95vw;
  margin: 0 auto;
  margin-top: 2vh;
}
.process-card {
  margin-bottom: 1vh;
}
.item {
  margin-left: 10px;
}
</style>
